import { useStore } from "@/store";
import { CommonPPT } from "@/components/CommonPPT";

const PPTContent = () => {
  const {
    powerPointArr,
    curpowerPointIndex,
    PPtBgtype,
    PPtBgValue1,
    PPtBgValue2,
  } = useStore();
  // 单个幻灯片
  const slideListItem = powerPointArr?.[curpowerPointIndex - 1] || [];

  return (
    <div
      style={{
        // 设置元素的位置为相对定位
        position: "relative",
        // 设置元素的显示方式为弹性盒子
        display: "flex",
        // 设置弹性盒子的主轴方向为水平方向
        flexDirection: "row",
        // 设置弹性盒子的换行方式为换行
        flexWrap: "wrap",
        // 设置弹性盒子的子元素在主轴上的对齐方式为两端对齐
        justifyContent: "space-between",
        // 设置元素的宽度为1100px
        width: "1100px",
        // 设置元素的高度为550px
        height: "550px",
        // 设置元素的外边距为自动
        margin: "auto",
        // 设置元素的上外边距为50px
        // 设置元素的内边距为16px 32px
        // 设置元素的溢出方式为隐藏
        overflow: "hidden",
        // 设置元素的背景颜色为白色
        backgroundColor: "white",
        // 设置元素的阴影效果
        boxShadow:
          "0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.12)",
        background:
          slideListItem?.PPtBgtype == "gradient"
            ? `linear-gradient(to bottom right,${slideListItem?.PPtBgValue1},${slideListItem?.PPtBgValue2})`
            : slideListItem?.PPtBgtype == "img"
            ? `url(${slideListItem?.PPtBgValue1}) 0% 0% / cover no-repeat`
            : slideListItem?.PPtBgValue1 || "#fff",
        backgroundSize: "cover", // 设置背景图片大小
        backgroundRepeat: "no-repeat", // 设置背景图片不重复
        transform: "scale(1.2)",
        marginTop: 80,
      }}
    >
      <CommonPPT slideListItem={slideListItem} fromOrigin="预览" />
      <div
        // 设置样式
        style={{
          // 设置定位为绝对定位
          position: "absolute",
          // 设置底部距离为4
          bottom: 4,
          // 设置左边距离为4
          left: 4,
          // 设置文字颜色为#bfbfbf
          color: "#bfbfbf",
          // 设置字体大小为16
          fontSize: 16,
        }}
      >
        {curpowerPointIndex}/{powerPointArr?.length}
      </div>
    </div>
  );
};

export default PPTContent;
